<template>
  <section>
      <div class="wp-service-header" v-if="sourceType==='default' && canModify">
          <el-button   type="warning" icon="el-icon-plus" @click.native="toAdd">新增服务</el-button>
      </div>
      <div>
          <el-table :data="serviceInfoList">
            <el-table-column label="服务名称" prop="serviceName" show-overflow-tooltip>
                <template slot-scope="scope">
                    <el-link type="primary" @click.native="toDetail(scope.row)">{{scope.row.serviceName}}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="服务类型" prop="serviceTypeName" show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="服务项目" show-overflow-tooltip>
                     <template slot-scope="scope">
                         {{ showDetail(scope.row.salesServiceDetailInfoList) }}
                     </template>
            </el-table-column>
            <el-table-column label="费用合计（元）" prop="actualTotalAmount"></el-table-column>
            <el-table-column label="备注" prop="remark" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{scope.row.remark||'--'}}
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" v-if="sourceType==='default' && canModify">
                <template slot-scope="scope">
                 <el-link type="danger" @click.native="deleteService(scope.row)">删 除</el-link>
                </template>
            </el-table-column>
          </el-table>
      </div>
      <el-dialog :top="'2vh'" :before-close="close" :close-on-click-modal="false"  width="60%" :title="title" :visible.sync="visible" append-to-body>
          <el-form inline :model="serviceInfo" ref="serviceFormRef" >
              <el-row>
                <el-col :span="7">
                    <el-form-item label="服务类型" prop="serviceType" :rules="{required: true, message: '不能为空', trigger: 'blur' }">
                    <el-select clearable :disabled="isEditFlag" v-model="serviceInfo.serviceType" placeholder="请选择" @change="selectChange">
                    <el-option
                    v-for="item in serviceTypes"
                    :label="item.bizName"
                    :value="item.bizValue"
                    :key="item.bizValue"
                    ></el-option>
                    </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9" :offset="2">
                    <el-form-item label="服务名称" prop="serviceName" :rules="{required: true, message: '不能为空', trigger: 'blur' }">
                        <el-input :readonly="!canModify" clearable   v-model.trim="serviceInfo.serviceName" placeholder="服务名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                        <el-form-item label="费用合计(元)" prop="actualTotalAmount">
                            <el-input  :readonly="!canModify" style="width:100px" v-model="actualTotalAmount" placeholder="实际合计收费"></el-input>
                        </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                    <el-form-item label="备注">
                        <el-input :readonly="!canModify" v-model="serviceInfo.remark" placeholder="备注" type="textarea"></el-input>
                    </el-form-item>
                </el-col>
              </el-row>
            <el-row>
              <el-col :span="12" :offset="12" style="text-align: right;">
               <el-button v-if="sourceType==='default' && canModify" type="warning"  @click.native="addService">添加服务</el-button>
              </el-col>
            </el-row>
             <el-row v-for="(item, index) in serviceInfo.salesServiceDetailInfoList" :key="item.key">
                <el-col :span="6">
                <el-form-item
                       :label="'服务项目'"
                       :prop="'salesServiceDetailInfoList.' + index + '.serviceDetailName'"
                       :rules="{required: true, message: '不能为空', trigger: 'blur' }">
                    <el-input  :readonly="!canModify" v-model="item.serviceDetailName" placeholder="服务名称"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="6"  :offset="2">
                <el-form-item
                       :label="'次数'"
                       :prop="'salesServiceDetailInfoList.' + index + '.serviceNum'"
                       :rules="{required: true, message: '不能为空', trigger: 'blur' }">
                   <el-input-number  :disabled="!canModify" size="small" :min="1" :controls="true" v-model="item.serviceNum" placeholder="服务次数"></el-input-number>
                </el-form-item>
                </el-col>
                <el-col :span="4" :offset="2">
                <el-form-item
                       :label="'单价(元)'"
                       :prop="'salesServiceDetailInfoList.' + index + '.price'"
                       :rules="{required: true, message: '不能为空', trigger: 'blur' }">
                   <el-input v-model="item.price" :readonly="!canModify" placeholder="服务单价"></el-input>
                </el-form-item>
                </el-col>
                <el-col :span="2" :offset="2" >
                      <el-form-item label="操作" v-if="sourceType==='default' && canModify">
                            <el-button type="danger"  size="mini" @click="removeService(item)">删除</el-button>
                      </el-form-item>
                </el-col>
            </el-row>
            <div style="text-align: center;" v-if="sourceType==='default' && canModify" >
                <el-button @click="close">取 消</el-button>
                <el-button type="success" @click="save">保 存</el-button>
            </div>
          </el-form>
      </el-dialog>
  </section>
</template>

<script>
import Mixins from '../mixins'
import {deepClone, toDecimal} from '@/utils'
export default {
  props: {
    sourceType: {type: String, default: 'default'},
    canModify: {type: Boolean, default: true},
    param: {type: Object,
      default: () => {
        return {}
      }
    }
  },
  mixins: [Mixins],
  components: {},
  mounted () {
    this.getServiceInfoList(this.param.orderNo)
  },
  data () {
    return {
      serviceInfoList: [],
      visible: false,
      isEditFlag: false,
      actualTotalAmount: null,
      serviceInfo: {
        salesServiceDetailInfoList: [{
          serviceDetailName: '',
          price: null,
          serviceNum: 1,
          unit: '次'
        }]
      },
      totalAmount: 0,
      title: ''
    }
  },
  watch: {
    serviceInfo: {
      handler (val) {
        const salesServiceDetailInfoList = val.salesServiceDetailInfoList
        if (salesServiceDetailInfoList && salesServiceDetailInfoList.length > 0) {
          this.totalAmount = toDecimal(salesServiceDetailInfoList.reduce((sum, item) => {
            item.totalAmount = ((item.price||0) * item.serviceNum)||0
            return sum + item.totalAmount
          }, 0))
          val.totalAmount = this.totalAmount
        }
      },
      deep: true
    },
    totalAmount: {
      handler (val, old) {
        if (old !== 0) {
          this.actualTotalAmount = val
        }
      }
    }
  },
  methods: {
    close () {
      this.visible = false
      this.totalAmount = 0
    },
    toAdd () {
      this.title = '新建服务'
      this.visible = true
      this.isEditFlag = false
      this.serviceInfo = {
        salesServiceDetailInfoList: [{
          serviceDetailName: '',
          price: null,
          serviceNum: 1,
          unit: '次'
        }]
      }
    },
    toDetail (row) {
      this.visible = true
      this.isEditFlag = true
      this.title = '编辑服务'
      this.serviceInfo = deepClone(row)
      this.actualTotalAmount = row.actualTotalAmount
    },
    selectChange (val) {
      if (this.serviceTypes) {
        const obj = this.serviceTypes.find(item => item.bizValue === val) || {}
        this.serviceInfo.serviceTypeName = obj.bizName || ''
      }
    },
    deleteService (row) {
      this.$msgBox.confirm('确认删除服务！', () => {
        this.requestOption('deleteOrderService', {orderNo: row.orderNo, serviceCode: row.serviceCode}, res => {
          if (res.code === 0) {
            this.getServiceInfoList(this.param.orderNo)
          }
        })
      })
    },
    showDetail (list) {
      if (list && list.length > 0) {
        return list.reduce((text, item) => {
          if (text === '') {
            return text + (item.serviceDetailName || '')
          }
          return text + ',' + (item.serviceDetailName || '')
        }, '')
      }
      return '--'
    },
    getServiceInfoList (orderNo) {
      this.requestOption('getOrderServiceList', orderNo, res => {
        this.serviceInfoList = res.data || []
      })
    },
    removeService (item) {
      if (this.serviceInfo.salesServiceDetailInfoList.length <= 1) {
        this.$msgBox.error('最后一项不可删除')
        return
      }
      var index = this.serviceInfo.salesServiceDetailInfoList.indexOf(item)
      if (index !== -1) {
        this.serviceInfo.salesServiceDetailInfoList.splice(index, 1)
      }
    },
    addService () {
      this.serviceInfo.salesServiceDetailInfoList.push({
        serviceDetailName: '',
        price: null,
        serviceNum: 1,
        unit: '次',
        key: Date.now()
      })
    },
    save () {
      this.$refs.serviceFormRef.validate(validate => {
        if (validate) {
          this.serviceInfo.actualTotalAmount = this.actualTotalAmount
          this.serviceInfo.orderNo = this.param.orderNo
          this.requestOption('saveOrderService', this.serviceInfo, res => {
            if (res.code === 0) {
              this.getServiceInfoList(this.param.orderNo)
              this.visible = false
            }
          })
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.wp-service-header {
  text-align: right;
  margin-bottom: 5px;
}
</style>
